* {
    margin: 0;
    padding: 0;
}

.top-toolbar {
    background-color: skyblue;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-toolbar > div {
    width: 80%;
    display: flex;
    justify-content: space-between;
}

.top-toolbar > div > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
}

.top-toolbar > div > div:nth-child(2) > div {
    margin: 0 10px;
}

.content {
    display: flex;
    justify-content: space-between;
}

.left {
    background-color: gray;
    width: 200px;
    height: calc(100vh - 50px);
    text-align: center;
}

.left > div {
    background-color: slateblue;
    margin: 2px 0;
    line-height: 50px;
    cursor: pointer;
}

.left > div > div {
    display: none;
}

.left > div:first-child div {
    display: block;
    background-color: lightblue;
    margin: 2px 0;
}

/*.left > div:hover {*/
/*    background-color: lightblue;*/
/*}*/

.right {
    width: calc(100vw - 200px);
    height: calc(100vh - 50px);

}